<template>
    <!-- 楼栋卡片 -->
    <el-drawer v-model="cardDialog" :size="1300" :before-close="handleClose9" :show-close="false" class="loudong-card">
        <template #header>
            <div class="flex justify-between items-center">
                <span class="text-lg">楼栋卡片</span>
                <div>
                    <el-button @click="cardDialog = false">取消</el-button>
                </div>
            </div>
        </template>
        <div id="printTable">
            <div class="detone flex al_c">
                <img v-if="cardInfo.picture" :src="cardInfo.picture" alt=""
                    style="width: 250px;height: 140px;border-radius: 5px;">
                <img v-else src="http://warehouse-api.lanbeiduo.com/api/file/download/vFzHlSt4v7_no_pic.jpg" alt=""
                    style="width: 250px;height: 140px;border-radius: 5px;">
                <div class="detone_right">
                    <div class="detone_right_tit flex al_c jus_sb">
                        <div class="flex al_c">
                            <div class="deTitle">{{ cardInfo.areaName }}</div>
                            <div class="flex al_c" style="margin-left: 1.5vw;">
                                <img src="http://warehouse-api.lanbeiduo.com/api/file/download/HAbncmHob5_dizhi.png"
                                    alt="" style="margin-right: 0.5vw;width:20px;height: 20px;">
                                <div>{{ cardInfo.areaAddress }}</div>
                            </div>
                        </div>
                        <div class="detstateBtn no-print">
                                <span v-print="printObj">打印卡片</span>
                            </div>
                    </div>
                    <div class="flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/ZhN5lewhQU_ssdw.png" alt=""
                            style="margin-right: 0.5vw;width: 1.5vw;">
                        <div>权属登记情况：</div>
                        <div style="color: #5597F1;">
                            {{ qsdjList[cardInfo.ownership - 1]?.name }}
                        </div>
                    </div>
                    <div class="detTotle flex al_c jus_sb" style="font-size: 16px;">
                        <div class="flex al_c" style="flex: 1;">
                            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/3HtlnRZgz8_wu_01.png"
                                style="width: 45px;height: 45px;">
                            <div style="margin-left: 0.5vw;">
                                <div class="dettot">总层数</div>
                                <div class="detnum"><span style="color: #5597f1;">{{ cardInfo.totalFloor }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex al_c" style="flex: 1;">
                            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/fjJWPNzGZ8_wu_02.png"
                                style="width: 45px;height: 45px;">
                            <div style="margin-left: 0.5vw;">
                                <div class="dettot">总建筑面积</div>
                                <div class="detnum"><span style="color: #36d896;">{{ cardInfo.totalArea }}</span>m²
                                </div>
                            </div>
                        </div>
                        <div class="flex al_c" style="flex: 1;">
                            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/oIkHVJ2sEM_wu_03.png"
                                style="width: 45px;height: 45px;">
                            <div style="margin-left: 0.5vw;">
                                <div class="dettot">办公楼结构</div>
                                <div class="detnum"><span style="color: #f1a955;">
                                        {{ buildingStructs[cardInfo.buildingStruct - 1]?.label }}
                                    </span></div>
                            </div>
                        </div>
                        <div class="flex al_c" style="flex: 1;">
                            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/wDYqNbWfJu_wu_04.png"
                                style="width: 45px;height: 45px;">
                            <div style="margin-left: 0.5vw;">
                                <div class="dettot">建设年代</div>
                                <div class="detnum"><span style="color: #f18155;">{{ cardInfo.createYear }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dwgltabs flex al_c">
                <div class="dwgltabs_item dwgltabs_item_ac">基本信息</div>
                <div class="dwgltabs_item" @click="tabChange">使用信息</div>
                <div class="dwgltabs_item">权属信息</div>
                <div class="dwgltabs_item">物业信息</div>
                <div class="dwgltabs_item">维修记录</div>
                <div class="dwgltabs_item">位置信息</div>
            </div>
            <div class="dettwo">
                <div class="baseinfo" id="1">
                    <div class="dettwo_info_title flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/9yDVsyoqh6_wu1.png"
                            style="margin-right: 0.4vw;">
                        <div>基本信息</div>
                    </div>
                    <div class="detInfo_cont flex al_c">
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">总建筑面积：</div>
                            <div class="detfoit_right">{{ cardInfo.totalArea }}</div>
                        </div>
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">占地面积：</div>
                            <div class="detfoit_right">{{ cardInfo.coverArea }}</div>
                        </div>
                        <div class="detfoit flex al_c" style="flex: 0.7;">
                            <div class="detfoit_left">是否有电梯：</div>
                            <div class="detfoit_right">
                                {{ cardInfo.lift == 1 ? '是' : '否' }}
                            </div>
                        </div>
                    </div>
                    <div class="detInfo_cont flex al_c">
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">总层数：</div>
                            <div class="detfoit_right">{{ cardInfo.totalFloor }}</div>
                        </div>
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">地上层数：</div>
                            <div class="detfoit_right">{{ cardInfo.overgroundFloor }}</div>
                        </div>
                        <div class="detfoit flex al_c" style="flex: 0.7;">
                            <div class="detfoit_left">地下层数：</div>
                            <div class="detfoit_right">{{ cardInfo.undergroundFloor }}</div>
                        </div>
                    </div>
                    <div class="detInfo_cont flex al_c">
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">配置来源：</div>
                            <div class="detfoit_right">{{ sources[cardInfo.source - 1]?.label }}</div>
                        </div>
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">楼栋分类：</div>
                            <div class="detfoit_right">{{ cardInfo.buildingType == 1 ? '使用' : '储备' }}</div>
                        </div>
                        <div class="detfoit flex al_c" style="flex: 0.7;">
                            <div class="detfoit_left">共有情况：</div>
                            <div class="detfoit_right">{{ cardInfo.tag == 1 ? '独栋独有' : '部分楼层' }}</div>
                        </div>
                    </div>
                    <div class="detInfo_cont flex al_c">
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">是否测绘: </div>
                            <div class="detfoit_right"></div>
                        </div>
                        <div class="detfoit flex al_c">
                            <div class="detfoit_left">建筑使用系数：</div>
                            <div class="detfoit_right"></div>
                        </div>
                        <div class="detfoit flex al_c" style="flex: 0.7;">
                            <div class="detfoit_left">总使用面积：</div>
                            <div class="detfoit_right">{{ cardInfo.totalUseArea }}</div>
                        </div>
                    </div>
                </div>
                <div class="baseinfo" id="2" ref="syxx">
                    <div class="dettwo_info_title flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/Av23SIA86i_wu2.png"
                            style="margin-right: 0.4vw;">
                        <div>使用信息</div>
                    </div>
                    <div style="margin-top: 1vh;">
                        <el-table :data="useData" row-key="id">
                            <el-table-column align="left" type="index" label="序号" width="80"></el-table-column>
                            <el-table-column align="left" label="单位类型" prop="unitType" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="left" label="单位名称" prop="name" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="left" label="三定人数" prop="thirdNums">
                            </el-table-column>
                            <el-table-column align="left" label="办公室" prop="name">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 5) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="服务用房" prop="name">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 1) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="设备用房" prop="name">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 2) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="附属用房" prop="name">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 3) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="业务用房">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 4) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="闲置用房">
                                <template #default="scope">
                                    <span>{{ formattedData(useData[scope.$index].roomExceed, 6) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="使用楼层" prop="floors" show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="baseinfo" id="3">
                    <div class="dettwo_info_title flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/Av23SIA86i_wu2.png"
                            style="margin-right: 0.4vw;">
                        <div>权属信息</div>
                    </div>
                    <div v-if="quanshuData.length > 0" class="tabCont_item flex al_c jus_sb" style="margin: 1vh 0 0 0;">
                        <div class="tabCont_item_left">
                            <div>
                                <img v-if="quanshuData[0].propertyCert"
                                    src="http://113.207.112.25:6000/static/houseland/img/index_img/no_pic.jpg"
                                    class="image" style="width: 185px;height: 130px;border-radius: 5px;">
                                <img v-else src="http://113.207.112.25:6000/static/houseland/img/index_img/no_pic.jpg"
                                    class="image" style="width: 185px;height: 130px;border-radius: 5px;">
                            </div>
                        </div>
                        <div class="tabCont_item_right" style="height: 130px;">
                            <div class="tit1 flex al_c jus_sb" style="border-bottom: 1px solid #e1e1e2;">
                                <div class="flex al_c">
                                    <div class="deTitle" style="font-size: 1.1vw;">不动产权证</div>
                                    <div class="flex al_c" style="margin-left:1.5vw;font-size: 1.1vw;">
                                        <img src="http://113.207.112.25:6000/static/houseland/img/index_img/所属单位.png"
                                            style="margin-right:0.5vw;width: 1.2vw;">
                                        <div>产权证号：{{ quanshuData[0].certificateNo }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="infotit flex al_c">
                                <div class="infotit">
                                    <div class="infotit_left">权利人：</div>
                                    <div class="infotit_right">{{ quanshuData[0].obligee }}</div>
                                </div>
                                <div class="infotit">
                                    <div class="infotit_left">不动产单元号：</div>
                                    <div class="infotit_right">{{ quanshuData[0].realEstateUnitNo }}</div>
                                </div>
                                <div class="infotit" style="flex: 0.7;">
                                    <div class="infotit_left">共有情况：</div>
                                    <div class="infotit_right">{{ quanshuData[0].commonSituation == 1 ? '共同共有' :
                                        '单独所有' }}
                                    </div>
                                </div>
                            </div>
                            <div class="infotit flex al_c">
                                <div class="infotit">
                                    <div class="infotit_left">权利类型：</div>
                                    <div class="infotit_right">{{ quanshuData[0].rightType }}</div>
                                </div>
                                <div class="infotit">
                                    <div class="infotit_left">权利性质：</div>
                                    <div class="infotit_right">{{ quanshuData[0].rightNature }}</div>
                                </div>
                                <div class="infotit" style="flex: 0.7;">
                                    <div class="infotit_left">用途：</div>
                                    <div class="infotit_right">{{ quanshuData[0].purpose }}</div>
                                </div>
                            </div>
                            <div class="infotit flex al_c">
                                <div class="infotit">
                                    <div class="infotit_left">土地使用权面积：</div>
                                    <div class="infotit_right">{{ quanshuData[0].landUseRightArea }}平方米</div>
                                </div>
                                <div class="infotit">
                                    <div class="infotit_left">房屋建筑面积：</div>
                                    <div class="infotit_right">{{ quanshuData[0].buildingArea }}平方米</div>
                                </div>
                                <div class="infotit" style="flex: 0.7;">
                                    <div class="infotit_left">使用期限：</div>
                                    <div class="infotit_right">{{ quanshuData[0].serviceLife }}</div>
                                </div>
                            </div>
                            <div class="infotit flex al_c">
                                <div class="infotit" style="flex: 3;">
                                    <div class="infotit_left">权力其他状况：</div>
                                    <div class="infotit_right" title="">{{ quanshuData[0].otherRight }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="height: 60px;text-align: center;color: #909399;line-height: 60px;">暂无数据</div>
                </div>
                <div class="baseinfo" id="4">
                    <div class="dettwo_info_title flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/Av23SIA86i_wu2.png"
                            style="margin-right: 0.4vw;">
                        <div>物业信息</div>
                    </div>
                    <div style="margin-top: 1vh;">
                        <el-table :data="wuyeData" row-key="id">
                            <el-table-column align="left" type="index" label="序号" width="80"></el-table-column>
                            <el-table-column align="left" label="管理类型">
                                <template #default="scope">
                                    <span>{{ scope.row.managerType == 1 ? '自管' : '第三方物业单位' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="服务单位名称" prop="name"
                                show-overflow-tooltip></el-table-column>
                            <el-table-column align="left" label="服务单位负责人" prop="superintendent"></el-table-column>
                            <el-table-column align="left" label="联系电话" prop="contact"></el-table-column>
                            <el-table-column align="left" label="开始时间" prop="serveStart"></el-table-column>
                            <el-table-column align="left" label="结束时间" prop="serveEnd"></el-table-column>
                            <el-table-column align="left" label="合同物业费" prop="property"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="baseinfo" id="5">
                    <div class="dettwo_info_title flex al_c">
                        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/hFcBSCGPeC_wu3.png"
                            style="margin-right: 0.4vw;">
                        <div>维修记录</div>
                    </div>
                    <div style="margin-top: 1vh;">
                        <el-table :data="wxData" row-key="id">
                            <el-table-column align="left" label="序号">
                                <template #default="scope">
                                    <el-input v-model="scope.row.roomNo"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="单位名称">
                                <template #default="scope">
                                    <el-input v-model="scope.row.roomArea"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="维修内容">
                                <template #default="scope">
                                    <el-input v-model="scope.row.notes"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="维修时间">
                                <template #default="scope">
                                    <el-input v-model="scope.row.notes"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="维修信息">
                                <template #default="scope">
                                    <el-input v-model="scope.row.notes"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import {
    getAllBgqList,
    getLouDongList,
    deleteLouDong,
    createLouDong,
    updateLouDong,
    getQuanShuList,
    deleteQuanShu,
    createQuanShu,
    updateQuanShu,
    setPicture,
    getBuildingFloors,
    savePicture,
    removePicture,
    getFangJianList,
    deleteFangJian,
    createFangJian,
    updateFangJian
} from '@/api/shujuchuli'
import {
    getRegionList,
    buildingProperty,
    unitLedger
} from '@/api/unit'
import { sources, qsdjList } from '@/utils/constant'
import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
defineOptions({
    name: 'ldCard'
})
const appStore = useAppStore()
const cardDialog = ref(false)
const idsParam = ref({ buildingId: '' })
const buildingStructs = ref([
    {
        label: '框架结构（框剪结构）',
        value: 1
    },
    {
        label: '砖木',
        value: 2
    },
    {
        label: '砖混',
        value: 3
    },
    {
        label: '钢结构',
        value: 4
    }
])
const quanshuData = ref([])
const wuyeData = ref([])
const useData = ref([])
const getAllData = async () => {
    const res1 = await getQuanShuList(idsParam.value.buildingId)
    console.log(res1,'res1')
    if (res1.code == 200) {
        quanshuData.value = res1.result
    }
    const res2 = await buildingProperty(idsParam.value.buildingId)
    if (res2.code == 200) {
        wuyeData.value = res2.result
    }
    const res3 = await unitLedger({ buildingId: idsParam.value.buildingId })
    if (res3.code == 200) {
        useData.value = res3.result.data
    }
    console.log(quanshuData.value,'quanshuData.value');
    cardDialog.value = true
}
const cardInfo = ref({})
const openCard = (item,val) => {
    cardInfo.value = item
    console.log(cardInfo,'cardInfo')
    if(val=='id'){
        idsParam.value.buildingId = item.id
    }else{
        idsParam.value.buildingId = item.buildingId
    }
    console.log(val,idsParam.value.buildingId,'cardInfo')
    getAllData()
}

defineExpose({ openCard })
const handleClose9 = () => {
    cardDialog.value = false
}
function formattedData(data,val){
    let res = ''
    let obj = data.find(item=>item.roomTypeInt==val)
    if(obj){
        res = obj.realArea ||'0.00'
    }
    return res
}
const printObj = ref({
    id: "printTable", // 这里是要打印元素的ID
    // url:'https://www.baidu.com/',
    popTitle: "楼栋卡片", // 打印的标题
})
const wxData = ref([])
</script>

<style lang="scss">
.loudong-card {

    // background: #f6f7fbcc;
    .detone {
        margin: 1.5vh auto;
        background: #FFFFFF;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        padding: 1vw;

        .img {
            width: 250px;
            height: 140px;
            border-radius: 5px;
        }

        .detone_right {
            height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 1.5vw;

            .detone_right_tit {
                border-bottom: 1px solid #e1e1e2;
                padding-bottom: 0.9vh;
                font-size: 16px;
                font-weight: 500;
                color: #333333;
            }

            .deTitle {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
            }

            .detstateBtn {
                padding: 0.5vh 0.8vw;
                background: #F3F3F3;
                border-radius: 14px;
                font-size: 1.1vw;
                color: #5CD6B1;
                font-weight: 600;
                cursor: pointer;
                font-size: 12px;
            }
        }

        .detnum {
            color: #999999;
            font-size: 16px;
        }
    }

    .dwgltabs {
        background: #f7f8fb;
        // position: sticky;
        // top: 0px;

        .dwgltabs_item {
            height: 30px;
            line-height: 30px;
            width: 100px;
            font-size: 14px;
            margin-right: 10px;
            border-radius: 12px 12px 0px 0px;
            text-align: center;
            border: 1px solid #ADD3FF;
            cursor: pointer;
            background: rgba(230, 237, 247, 0);
            transition: all 0.3slinear;
        }

        .dwgltabs_item_ac {
            background: #2C86EF;
            color: #ffffff !important;
        }
    }

    .dettwo {
        margin: 1.5vh auto;
        margin-top: 0;
        background: #FFFFFF;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        padding: 1.5vh 1vw;

        .dettwo_info_title {
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            color: #000000;
            width: 100%;
            height: 3vh;
            background: #DBE9FD;
            padding-left: 0.5vw;
            padding-right: 0.5vw;
        }

        .detInfo_cont {
            width: 95%;
            margin: 1vh auto;
        }

        .detfoit {
            flex: 1;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .detfoit_left {
            min-width: 4vw;
            text-align: left;
            font-weight: 500;
            color: #999999;
        }

        .detfoit_right {
            flex: 1;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .tabCont_item {
            padding: 1vh;
            background: #FFFFFF;
            box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
        }

        .tabCont_item_right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 1vw;
            width: 84%;

            /* border: 1px solid red; */
            /* height: 18vh; */
            .tit1 {
                padding-bottom: 0.9vh;
                border-bottom: 2px solid #e1e1e2;
            }

            .deTitle {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
            }

            .infotit {
                width: 100%;
                display: flex;
                flex: 1;
                align-items: center;
                font-size: 16px;
                margin-top: 0.5vh;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }

    .al_c {
        align-items: center;
    }

    .flex {
        display: flex;
    }

    .jus_sb {
        justify-content: space-between;
    }
}

@media print {

    //样式写在这里面
    #printTable {
        width: 1300px !important; //794px;
        margin: 0;
        padding: 90px 0 0 0;

        .no-print {
            display: none;
        }
    }

    div {
        font-size: 18px !important;
    }

    .detone {
        margin: 1.5vh auto;
        background: #FFFFFF;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        padding: 1vw;
    }

    .img {
        width: 250px;
        height: 140px;
        border-radius: 5px;
    }

    .detone_right {
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        margin-left: 1.5vw;
    }

    .detone_right_tit {
        border-bottom: 1px solid #e1e1e2;
        padding-bottom: 0.9vh;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
    }

    .deTitle {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
    }

    .detstateBtn {
        padding: 0.5vh 0.8vw;
        background: #F3F3F3;
        border-radius: 14px;
        font-size: 1.1vw;
        color: #5CD6B1;
        font-weight: 600;
        cursor: pointer;
        font-size: 12px;
    }

    .detnum {
        color: #999999;
        font-size: 16px;
    }

    .dwgltabs {
        background: #f7f8fb;
        position: sticky;
        top: 0px;
    }

    .dwgltabs_item {
        height: 30px;
        line-height: 30px;
        width: 100px;
        font-size: 14px;
        margin-right: 10px;
        border-radius: 12px 12px 0px 0px;
        text-align: center;
        border: 1px solid #ADD3FF;
        cursor: pointer;
        background: rgba(230, 237, 247, 0);
        transition: all 0.3slinear;
    }

    .dwgltabs_item_ac {
        background: #2C86EF;
        color: #ffffff !important;
    }

    .al_c {
        align-items: center;
    }

    .flex {
        display: flex;
    }

    .jus_sb {
        justify-content: space-between;
    }

    .dettwo {
        margin: 1.5vh auto;
        margin-top: 0;
        background: #FFFFFF;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        padding: 1.5vh 1vw;

        .dettwo_info_title {
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            color: #000000;
            width: 100%;
            height: 3vh;
            background: #DBE9FD;
            padding-left: 0.5vw;
            padding-right: 0.5vw;
        }

        .detInfo_cont {
            width: 95%;
            margin: 1vh auto;
        }

        .detfoit {
            flex: 1;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .detfoit_left {
            min-width: 4vw;
            text-align: left;
            font-weight: 500;
            color: #999999;
        }

        .detfoit_right {
            flex: 1;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .tabCont_item {
            padding: 1vh;
            background: #FFFFFF;
            box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
        }

        .tabCont_item_right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 1vw;
            width: 84%;

            /* border: 1px solid red; */
            /* height: 18vh; */
            .tit1 {
                padding-bottom: 0.9vh;
                border-bottom: 2px solid #e1e1e2;
            }

            .deTitle {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
            }

            .infotit {
                width: 100%;
                display: flex;
                flex: 1;
                align-items: center;
                font-size: 16px;
                margin-top: 0.5vh;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>